<template>
  <div class="app-config">
    <p>【DEBUG】当前正在渲染 AppHomePageConfig 组件</p>

    <!-- 新增：富文本编辑器 -->
    <el-card class="config-section">
      <div slot="header"><span>首页富文本</span></div>
      <!-- Ruoyi 内置富文本组件 -->
      <editor v-model="richText" :min-height="192"/>
      <el-form label-width="80px" style="margin-top:12px">
        <el-form-item>
          <el-button type="primary" size="small" @click="submitRichText">保存富文本</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 广告图（单图） -->
    <el-card class="config-section">
      <div slot="header"><span>广告图（单图）</span></div>
      <el-form :model="adForm" label-width="80px">
        <el-form-item label="广告图">
          <image-upload v-model="adForm.url"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="submitAd">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 顶部轮播图 -->
    <el-card class="config-section">
      <div slot="header"><span>顶部轮播图</span></div>
      <el-form :model="topForm" label-width="100px">
        <el-form-item label="轮播图片">
          <image-upload v-model="topForm.urls" multiple/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="submitTop">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 首页通知 -->
    <el-card class="config-section">
      <div slot="header"><span>首页通知</span></div>
      <el-form :model="noticeForm" label-width="100px">
        <el-form-item label="通知内容">
          <el-input
            v-model="noticeForm.content"
            type="textarea"
            :rows="3"
            placeholder="请输入首页通知内容"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="submitNotice">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 活动轮播图 -->
    <!-- 活动轮播图 -->
    <!-- 活动描述文本 -->

    <el-card class="config-section">
      <el-form :model="activityDescForm" label-width="100px">
        <el-form-item label="活动描述">
          <el-input
            v-model="activityDescForm.text"
            type="textarea"
            :rows="3"
            placeholder="请输入活动轮播图的描述文本"
            maxlength="300"
            show-word-limit
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="submitActivityDesc">提交描述</el-button>
        </el-form-item>
      </el-form>
      <el-divider/>
      <div slot="header"><span>活动轮播图</span></div>

      <!-- 轮播图片 -->
      <el-form :model="activityForm" label-width="100px">
        <el-form-item label="轮播图片">
          <image-upload v-model="activityForm.urls" multiple/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="submitActivity">提交轮播图</el-button>
        </el-form-item>
      </el-form>


    </el-card>

    <!-- 热卖轮播图 -->
    <!-- 热卖描述文本 -->
    <el-card class="config-section">
      <el-form :model="hotDescForm" label-width="100px">
        <el-form-item label="热销描述">
          <el-input
            v-model="hotDescForm.text"
            type="textarea"
            :rows="3"
            placeholder="请输入热卖描述文本"
            maxlength="300"
            show-word-limit
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="submitHotDesc">提交描述</el-button>
        </el-form-item>
      </el-form>

      <el-divider/>
      <div slot="header"><span>热卖轮播图</span></div>
      <el-form :model="hotForm" label-width="100px">
        <el-form-item label="轮播图片">
          <image-upload v-model="hotForm.urls" multiple/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="submitHot">提交</el-button>
        </el-form-item>
      </el-form>


    </el-card>
  </div>
</template>

<script>
// 引入新 API
import { saveAppConfig, getAppConfig } from "@/api/test/test"; // 引入新接口


export default {
  name: "AppHomePageConfig",
  data() {
    return {
      adForm: {url: ""},
      noticeForm: {content: ""},
      topForm: {urls: []},
      activityForm: {urls: []},
      // 活动轮播图描述（文本）
      activityDescForm: {text: ""},
      hotForm: {urls: []},
      hotDescForm: {text: ""},
      richText: '',
    };
  },
  created() {
    this.loadAllConfigs(); // 如果后端也提供 GET 接口，可实现加载；否则可先注释
  },
  methods: {
    async loadAllConfigs() {
      try {
        const res = await getAppConfig(); // 假设返回格式为 { key1: value1, key2: value2, ... }
        const config = res.data || {};
        // 广告图（单图）
        this.adForm.url = config.homeAdv || "";

        // 顶部轮播图（多图，逗号分隔）
        this.topForm.urls = config.homepageBanner ? config.homepageBanner.split(",") : [];

        // 首页通知
        this.noticeForm.content = config.homeNotice || "";

        // 活动轮播图 & 描述
        this.activityForm.urls = config.activityBanner ? config.activityBanner.split(",") : [];
        this.activityDescForm.text = config.activityDesc || "";

        // 热卖轮播图 & 描述
        this.hotForm.urls = config.hotBanner ? config.hotBanner.split(",") : [];
        this.hotDescForm.text = config.hotDesc || "";
        this.richText = config.richText || '';
      } catch (error) {
        console.error("加载配置失败", error);
        this.$message.warning("加载配置失败，使用默认值");
      }
    },


    // 【可选】如果你有对应的 GET 接口，可以加载已有数据
    // 暂时先不实现加载，聚焦提交

    // 提交广告图（单图）
    async submitAd() {
      await this.saveConfig("homeAdv", this.adForm.url);
    },
    // 提交顶部轮播图
    async submitTop() {
      await this.saveConfig("homepageBanner", this.topForm.urls);
    },
    // 首页通知
    async submitNotice() {
      await this.saveConfig("homeNotice", this.noticeForm.content);
    },
    // 提交活动轮播图
    async submitActivity() {
      await this.saveConfig("activityBanner", this.activityForm.urls);
    },
    // 提交活动轮播图描述
    async submitActivityDesc() {
      await this.saveConfig("activityDesc", this.activityDescForm.text);
    },
    // 提交热卖轮播图
    async submitHot() {
      await this.saveConfig("hotBanner", this.hotForm.urls);
    },
    // 提热卖动轮播图描述
    async submitHotDesc() {
      await this.saveConfig("hotDesc", this.hotDescForm.text);
    },

    // 通用保存方法
    async saveConfig(configKey, value) {
      try {
        await saveAppConfig(configKey, value);
        this.$message.success("保存成功");
      } catch (error) {
        console.error(`保存 ${configKey} 失败`, error);
        this.$message.error("保存失败，请重试");
      }
    },
    async submitRichText() {
      await this.saveConfig('richText', this.richText);
    }
  }
};
</script>


<style scoped>
.config-section {
  margin-bottom: 20px;
}
</style>
